import * as WelcomeMat from './base/example';
import * as WelcomeMatTrailhead from './trailhead-connected/example';
import * as Splash from './splash/example';
import * as InfoOnly from './info-only/example';
import Example from '../../../shared/components/Example';
import CodeView from '../../../shared/components/CodeView';
import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';

<div className="doc lead">
  A Welcome Mat provides a series of unordered items a user can click to learn about a thematic topic.
</div>

<CodeView exampleOnly isViewport demoStyles={getDemoStylesById(WelcomeMat.examples, 'with-completed-tiles')}>
  {getDisplayElementById(WelcomeMat.examples, "with-completed-tiles")}
</CodeView>

## About Welcome Mat

- Welcome Mat tiles may trigger walkthroughs, modals, videos, or navigate users to specific URLs.
- The Welcome Mat consists of two sections, the informational left pane and the actionable right pane.
- The left pane should be used to educate users as to the theme of the content displayed in the right pane.
- Icon choices, colors, and tile content can be customized to fit your experience.

## Base

<CodeView isViewport demoStyles={getDemoStylesById(WelcomeMat.examples, 'default')}>
  {getDisplayElementById(WelcomeMat.examples, "default")}
</CodeView>

## Examples

### With Completed Steps

As users complete items in the list, the list updates to show as completed.

As tiles are completed, they move to the bottom of the list, and get a modifier class of `slds-welcome-mat__tile_complete`.

<CodeView isViewport demoStyles={getDemoStylesById(WelcomeMat.examples, 'with-completed-tiles')}>
  {getDisplayElementById(WelcomeMat.examples, "with-completed-tiles")}
</CodeView>

### Trailhead Connected

The Trailhead Connected variant should only be used when users can achieve a badge in Trailhead for completing all steps in the current Welcome Mat.

Only Trailhead connected mats may have the Trailhead font for the header.

<CodeView isViewport demoStyles={getDemoStylesById(WelcomeMat.examples, 'default')}>
  {getDisplayElementById(WelcomeMatTrailhead.examples, "default")}
</CodeView>

### Trailhead Connected - Complete

When all tiles on a Trailhead Connected Welcome Mat are completed, users should be presented with a message and link to view their new badge on their Trailblazer profile page.

When a class of `slds-welcome-mat__info-progress_complete` is added to the `.slds-welcome-mat__info-progress` element, the complete check mark will appear with the Trailhead badge.

Additionally, the progress indicator should be replaced with a button to view the badge on the user's Trailblazer profile page.

<CodeView isViewport demoStyles={getDemoStylesById(WelcomeMatTrailhead.examples, 'trailhead-complete')}>
  {getDisplayElementById(WelcomeMatTrailhead.examples, "trailhead-complete")}
</CodeView>

### Info-only
In the event your displayed steps are informational rather than actionable, you can set the tiles to "info only" mode. In this variation, the `<a>` tags are removed from the tiles. The tiles also lose their button appearance, removing borders and shadows.

The tile container background changes from gray to white, which is done by applying the modifier class of `slds-welcome-mat__tiles_info-only` to the `slds-welcome-mat__tiles` element. Since the tiles aren't actionable, also apply the modifier class of `slds-welcome-mat__tile-info-only` to each `slds-welcome-mat__tile` element.

<CodeView isViewport demoStyles={getDemoStylesById(InfoOnly.examples, 'default')}>
  {getDisplayElementById(InfoOnly.examples, "default")}
</CodeView>

### Splash
The Splash variant is a singular interstitial modal. It removes the actionable/content column and allows the background image to span the full-width. Make sure that the areas of your background image behind your text provide enough contrast to ensure accessibility.

<CodeView isViewport demoStyles={getDemoStylesById(Splash.examples, 'default')}>
  {getDisplayElementById(Splash.examples, "default")}
</CodeView>
